<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>adhoc</title>
<style>
    #tblgrk { 
        font-size: 2em; 
        border: 1px solid black;
    }
    #tdchar {
        font-size: 5em;
        text-align: center;
    }
    table {
        border-collapse: collapse;
    }
    td {
        border: gray solid 1px;
    }
    td.tbllist {
        font-size: .5em;
    }
</style>

<script type="text/javascript">

function $(s) { return document.getElementById(s); }

var chars = {
// a
"α":{"id":"α", "name":"alpha",
  "lc":{0x00:"α", 0x01:"ὰ", 0x02:"ά", 0x04:"ἁ", 0x05:"ἃ",
        0x06:"ἅ", 0x08:"ἀ", 0x09:"ἂ", 0x0a:"ἄ", 0x10:"ᾶ",
        0x14:"ἇ", 0x18:"ἆ", 0x40:"ᾳ", 0x41:"ᾲ", 0x42:"ᾴ",
        0x44:"ᾁ", 0x45:"ᾃ", 0x46:"ᾅ", 0x48:"ᾀ", 0x49:"ᾂ",
        0x4a:"ᾄ", 0x50:"ᾷ", 0x54:"ᾇ", 0x58:"ᾆ", 0x80:"ᾰ",
        0x100:"ᾱ"},
  "uc":{0x00:"q", 0x01:"Ὰ", 0x02:"Ά", 0x04:"Ἁ", 0x05:"Ἃ",
        0x06:"Ἅ", 0x08:"Ἀ", 0x09:"Ἂ",           0x0A:"Ἄ",
        0x14:"Ἇ", 0x18:"Ἆ", 0x40:"ᾼ",
        0x44:"ᾉ", 0x45:"ᾋ", 0x46:"ᾍ", 0x48:"ᾈ", 0x49:"ᾊ",
        0x4A:"ᾌ",           0x54:"ᾏ", 0x58:"ᾎ", 0x80:"Ᾰ",
        0x100:"Ᾱ"}
},

// b
"β":{"id":"β", "name":"alpha",
 "lc":{0x00:"β"}, 
 "uc":{0x00:"Β"}}, 

// g
"γ":{"id":"γ", "name":"gamma",
 "lc":{0x00:"γ"}, 
 "uc":{0x00:"Γ"}}, 

// d
"δ":{"id":"δ", "name":"delta",
 "lc":{0x00:"δ"}, 
 "uc":{0x00:"Δ"}}, 

// e
"ε":{"id":"ε", "name":"epsilon",
 "lc":{0x00:"ε", 0x01:"ὲ", 0x02:"έ", 0x04:"ἑ", 0x05:"ἓ", 0x06:"ἕ",
       0x08:"ἐ", 0x09:"ἒ", 0x0a:"ἔ"},
 "uc":{0x00:"Ε", 0x01:"Ὲ", 0x02:"Έ", 0x04:"Ἑ", 0x05:"Ἓ", 0x06:"Ἕ",
       0x08:"Ἐ", 0x09:"Ἒ", 0X0A:"Ἔ"}
},
 
// z
"ζ":{"id":"ζ", "name":"zeta",
 "lc":{0x00:"ζ"}, 
 "uc":{0x00:"Ζ"}}, 

"η":{"id":"η", "name":"eta",
  "lc":{0x00:"η", 0x01:"ὴ", 0x02:"ή", 0x04:"ἡ", 0x05:"ἣ",
        0x06:"ἥ", 0x08:"ἠ", 0x09:"ἢ", 0x0a:"ἤ", 0x10:"ῆ",
        0x14:"ἧ", 0x18:"ἦ", 0x40:"ῃ", 0x41:"ῂ", 0x42:"ῄ",
        0x44:"ᾑ", 0x45:"ᾓ", 0x46:"ᾕ", 0x48:"ᾐ", 0x49:"ᾒ",
        0x4a:"ᾔ", 0x50:"ῇ", 0x54:"ᾗ", 0x58:"ᾖ"},
  "uc":{0x00:"Η", 0x01:"Ὴ", 0x02:"Ή", 0x04:"Ἡ", 0x05:"Ἣ",
        0x06:"Ἥ", 0x08:"Ἠ", 0x09:"Ἢ", 0x0a:"Ἤ",
        0x14:"Ἧ", 0x18:"Ἦ", 0x40:"ῌ",
        0x44:"ᾙ", 0x45:"ᾛ", 0x46:"ᾝ", 0x48:"ᾘ", 0x49:"ᾚ",
        0x4a:"ᾜ",           0x54:"ᾟ", 0x58:"ᾞ"}
},

// h
"θ":{"id":"θ", "name":"theta",
 "lc":{0x00:"θ"}, 
 "uc":{0x00:"Θ"}}, 

// i
"ι":{"id":"ι", "name":"iota",
 "lc":{0x00:"ι", 0x01:"ὶ", 0x02:"ί", 0x04:"ἱ", 0x05:"ἳ",
       0x09:"ἲ", 0x0a:"ἴ", 0x10:"ῖ", 0x14:"ἷ", 0x18:"ἶ",
       0x20:"ϊ", 0x21:"ῒ", 0x22:"ΐ", 0x30:"ῗ", 0x80:"ῐ",
       0x100:"ῑ"},
 "uc":{0x00:"Ι", 0x01:"Ὶ", 0x02:"Ί", 0x04:"Ἱ", 0x05:"Ἳ",
       0x09:"Ἲ", 0x0a:"Ἴ",           0x14:"Ἷ", 0x18:"Ἶ",
       0x20:"Ϊ",                               0x80:"Ῐ", 
       0x100:"Ῑ"}
},

// k
"κ":{"id":"κ", "name":"kappa",
 "lc":{0x00:"κ"}, 
 "uc":{0x00:"Κ"}}, 

// l
"λ":{"id":"λ", "name":"lambda",
 "lc":{0x00:"λ"}, 
 "uc":{0x00:"Λ"}}, 

// m
"μ":{"id":"μ", "name":"mu",
 "lc":{0x00:"μ"}, 
 "uc":{0x00:"Μ"}}, 

// n
"ν":{"id":"ν", "name":"nu",
 "lc":{0x00:"ν"}, 
 "uc":{0x00:"Ν"}}, 

"ξ":{"id":"ξ", "name":"chi",
 "lc":{0x00:"ξ"}, 
 "uc":{0x00:"Ξ"}}, 

// o
"ο":{"id":"ο", "name":"omicron",
 "lc":{0x01:"ὸ", 0x02:"ό", 0x04:"ὁ", 0x05:"ὃ", 0x06:"ὅ", 0x08:"ὀ",
       0x09:"ὂ", 0x0a:"ὄ"},
 "uc":{0x01:"Ὸ", 0x02:"Ό", 0x04:"Ὁ", 0x05:"Ὃ", 0x06:"Ὅ", 0x08:"Ὀ",
       0x09:"Ὂ", 0x0A:"Ὄ"}      
},

// p
"π":{"id":"π", "name":"pi",
 "lc":{0x00:"π"}, 
 "uc":{0x00:"Π"}}, 

// r
"ρ":{"id":"ρ", "name":"rho",
 "lc":{0x00:"ρ", 0x08:"ῤ"}, 
 "uc":{0x00:"Ρ"}}, 

// s
"σ":{"id":"σ", "name":"sigma",
 "lc":{0x00:"σ"}, 
 "uc":{0x00:"Σ"}}, 

"ς":{"id":"ς", "name":"stigma",
 "lc":{0x00:"ς"}, 
 "uc":{0x00:"Ϛ"}}, 

// t
"τ":{"id":"τ", "name":"tau",
 "lc":{0x00:"τ"}, 
 "uc":{0x00:"Τ"}}, 


"υ":{"id":"υ", "name":"upsilon",
 "lc":{0x01:"ὺ", 0x02:"ύ", 0x04:"ὑ", 0x05:"ὓ", 0x06:"ὕ", 0x08:"ὐ",
       0x09:"ὒ", 0x0a:"ὔ", 0x10:"ῦ", 0x14:"ὗ", 0x18:"ὖ", 0x20:"ϋ",
       0x21:"ῢ", 0x22:"ΰ", 0x30:"ῧ", 0x80:"ῠ", 0x100:"ῡ"},
 "uc":{0x01:"Ὺ", 0x02:"Ύ", 0x04:"Ὑ", 0x05:"Ὓ", 0x06:"Ὕ", 0x08:"ὐ",
       0x09:"ὒ", 0x0A:"ὔ",           0x14:"Ὗ",           0x20:"Ϋ",
                                     0x80:"Ῠ", 0x100:"Ῡ"}
}, 

// f
"φ":{"id":"φ", "name":"phi",
 "lc":{0x00:"φ"}, 
 "uc":{0x00:"Φ"}}, 

// x 
"χ":{"id":"χ", "name":"xi",
 "lc":{0x00:"χ"}, 
 "uc":{0x00:"Χ"}}, 

// q
"ψ":{"id":"ψ", "name":"psi",
 "lc":{0x00:"ψ"}, 
 "uc":{0x00:"Ψ"}}, 

// w
"ω":{"id":"ω", "name":"omega",
 "lc":{0x01:"ὼ", 0x02:"ώ", 0x04:"ὡ", 0x05:"ὣ", 0x06:"ὥ", 0x08:"ὠ",
       0x09:"ὢ", 0x0a:"ὤ", 0x10:"ῶ", 0x14:"ὧ", 0x18:"ὦ", 0x40:"ῳ",
       0x41:"ῲ", 0x42:"ῴ", 0x44:"ᾡ", 0x45:"ᾣ", 0x46:"ᾥ", 0x48:"ᾠ",
       0x49:"ᾢ", 0x4a:"ᾤ", 0x50:"ῷ", 0x54:"ᾧ", 0x58:"ᾦ"},
 "uc":{0x01:"Ὼ", 0x02:"Ώ", 0x04:"Ὡ", 0x05:"Ὣ", 0x06:"Ὥ", 0x08:"Ὠ",
       0x09:"Ὢ", 0x0a:"Ὤ",           0x14:"Ὧ", 0x18:"Ὦ", 0x40:"ῼ",                    
                           0x44:"ᾩ", 0x45:"ᾫ", 0x46:"ᾭ", 0x48:"ᾨ",
       0x49:"ᾪ", 0x4a:"ᾬ",           0x54:"ᾯ", 0x58:"ᾮ"}
}, 

"ϝ":{"id":"ϝ", "name":"digamma",
 "lc":{0x00:"ϝ"}, 
 "uc":{0x00:"Ϝ"}}, 

"Ϟ":{"id":"Ϟ", "name":"koppa",
 "lc":{0x00:"Ϟ"}, 
 "uc":{0x00:"ϟ"}}, 

"Ϡ":{"id":"Ϡ", "name":"sampi",
 "lc":{0x00:"Ϡ"}, 
 "uc":{0x00:"ϡ"}}
};

function eTblClick(e) {
    if(! e) { e = window.event; }

    var t = e.target;
    if(t.tagName != 'TD') {
        return;
    }
}

function eKey(e) {
    var c;
    if(! e) { e = window.event; }
    var t = e.target;
    var k = e.which ? e.which : e.keyCode;
    console.debug(k);
    var c = String.fromCharCode(k);
    if(! e.shiftKey) {
        c = c.toLowerCase();
    }
    console.debug(c);
    switch(k) {
        case 66: gkey = "α"; break;
        case 67: gkey = "β"; break;
        case 68: gkey = "ξ"; break;
        case 69: gkey = "δ"; break;
        case 70: gkey = "ε"; break;
        case 71: gkey = "φ"; break;
        case 72: gkey = "γ"; break;
        case 73: gkey = "θ"; break;
        case 74: gkey = "ι"; break;
        // case 75: gkey = "ϊ"; break;
        case 76: gkey = "κ"; break;
        case 77: gkey = "λ"; break;
        case 78: gkey = "μ"; break;
        case 79: gkey = "ν"; break;
        case 80: gkey = "ο"; break;
        case 81: gkey = "π"; break;
        case 82: gkey = "ψ"; break;
        case 83: gkey = "ρ"; break;
        case 84: gkey = "σ"; break;
        case 85: gkey = "τ"; break;
        case 86: gkey = "υ"; break;
        case 87: gkey = "ϋ"; break;
        case 88: gkey = "ω"; break;
        case 89: gkey = "χ"; break;
        case 90: gkey = "η"; break;
        case 66: gkey = "ζ"; break;
        case 66: gkey = ""; break;
        case 66: gkey = ""; break;
        case 66: gkey = ""; break;
        case 66: gkey = ""; break;
        case 66: gkey = ""; break;
        case 191:
            c = "/"; break;
    
        default:
            c = String.fromCharCode(k); break;
    }
    $('subscript').innerHTML = c;
}

</script>
</head>
<body onkeydown='eKey(event)'>

<table name='tblgrk' id='tblgrk' onclick='eTblClick(event)'>
<tr>
    <td class='tbllist' rowspan='4'>
    <div>a α</div>
    <div>b β</div>
    <div>c ξ</div>
    <div>d δ</div>
    <div>e ε</div>
    <div>f φ</div>
    <div>g γ</div>
    <div>h θ</div>
    <div>i ι</div>
    <div>j ϊ</div>
    <div>k κ</div>
    <div>l λ</div>
    <div>m μ</div>
    </td>
    <td class='tbllist' rowspan='4'>
    <div>n ν</div>
    <div>o ο</div>
    <div>p π</div>
    <div>q ψ</div>
    <div>r ρ</div>
    <div>s σ</div>
    <div>t τ</div>
    <div>u υ</div>
    <div>v ϋ</div>
    <div>w ω</div>
    <div>x χ</div>
    <div>y η</div>
    <div>z ζ
    </td>
    <td title='? perispomeni/circumflex' id='perispomeni'>~</td>
    <td title=': dialytika/diaeresis' id='dialytika'>¨</td>
    <td title='. vrachy/breve' id='vrache'>˘</td>
    <td title='- macron' id='macron'>-</td>
</tr>
<tr>
    <td title='\ varia/grave' id='varia'>`</td>
    <td title='( psili/rough' id='psili'>‛</td>
    <td title=') dasia/smooth' id='dasia'>’</td>
    <td title='/ oxia/acute' id='oxia'>´</td>
</tr>
<tr>
    <!-- <td title='upper case' id='uc'>uc</td> -->
    <td id='tdchar' colspan='4'>α</td>
</tr>
<tr>
    <td title=', subscript' id='subscript' colspan='4'>,</td>
<table>
</form>
</body>
</html>
